﻿<script src="../../../Scripts/VM/CommandInfo.js"></script>
<script src="../../../Scripts/VM/StackEntry.js"></script>
<script src="../../../Scripts/VM/EvaluationStack.js"></script>
<script src="../../../Scripts/VM/LocalMemory.js"></script>
<script src="../../../Scripts/VM/MethodState.js"></script>
<script src="../../../Scripts/VM/commands.js"></script>
<script src="../../../Scripts/VM/vm.js"></script>
       

<script src="../../../Scripts/ILAsm/SimpleILParser.js"></script>
<script src="../../../Scripts/Console/console.js"></script>
<script src="../../../Scripts/VM/vmController.js"></script>

<style>
    .console
    {
        padding-left:5px;  
    }
            
          
.console 
{
    background-color: black;
    color: white;
    font: 12pt consolas;
}

.consoleLine
{
    padding-top: 2px;
    font-weight: normal;
    line-height: 24px;
}

.prompt
{
    background-color: black;
    color: white;
    border: 0;
    outline: none;
    font: 12pt consolas;
    width: 60%;
    font-weight: normal;
    margin-left: -1px;
    margin-top: -1px;
}
            
            
            
.vm
{
    float:right;   
}
            
        
        #vmProperties
{
    width: 600px;
    border:1px solid black;
    border-spacing:0px;
    border-collapse:collapse;
}
                        
#vmProperties td:first-child
{
    background-color: Gray;
    width:120px;
}
            
#vmProperties td
{
    padding: 10px;
    border:1px solid gray;                
}
            
#executionStack, #localMemory
{
    width:100%;
    border:1px solid black;
    border-spacing:0px;
    border-collapse:collapse;
}
  
#executionStack td:first-child, #localMemory td:first-child
{
    background-color: white;
}
            
#executionStack td, #localMemory td
{
    padding: 2px;
    border:1px solid gray;                
}
            
#executionStack td:nth-child(3), #localMemory td:nth-child(3)
{
    width:100%;
}
        
        
</style>


<script>

    var console = new Console();
    var vm = new VM();
    var controller = new VMController(vm);

    $(document).ready(function () {
        console.SetWindow($("#console"));
        vm.Console = console;
        console.WriteHeader();
    });
            
    stepOne = function ()
    {
        controller.StepOne();
    };
            
    runProgram = function ()
    {
        controller.RunProgram($("div.editor-field textarea").val());
    };
            
            
</script>


<div id="controlPanel">
    <input type="button" id="runButton" value="Run" onclick="runProgram()"/>
    <input type="checkbox" id="continuousCheckBox" checked="checked" />
    <input type="button" id="nextButton" value="Next" onclick="stepOne()"/>
</div>

<div id="virtualMachine">
    <table id="vmProperties">
        <tr>
            <td>Instruction Pointer:</td>
            <td><div id="instructionPointer"></div></td>
        </tr>
        <tr>
            <td>Instruction:</td>
            <td><div id="currentInstruction"></div></td>
        </tr>
        <tr>
            <td>Local Memory:</td>
            <td>
                <table id="localMemory">
                    <tr>
                        <td>Index</td>
                        <td>Type</td>
                        <td>Value</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Execution Stack:</td>
            <td>

                <table id="executionStack">
                    <tr>
                        <td>#</td>
                        <td>Type</td>
                        <td>Value</td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</div>

        <div id="console" class="console" style="height: 400px;overflow:scroll"></div>
 
